<template>
  <div class="packages">
    <div ref="refsTable" class="formItem">
      <el-form style="margin-top: 10px" :inline="true" label-width="68px">
        <el-form-item label="录入时间">
          <el-date-picker v-model="value1" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
            value-format="yyyy-MM-dd" @change="timeChange1" style="width:380px" clearable align="right"
            :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>

        <el-form-item label="登记时间">
          <el-date-picker v-model="value2" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss" @change="timeChange2" style="width:380px"
            :default-time="['00:00:00', '23:59:59']" clearable :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>

        <el-form-item label="项目类型">
          <el-autocomplete class="inline-input" v-model="params.projectTypeName" :fetch-suggestions="querySearch"
            placeholder="请选择" @select="handleSelectProject" @focus="change(1)" style="width:228px"
            clearable></el-autocomplete>
          <!-- <el-select v-model="params.projectType" placeholder="请选择" style="width:228px" clearable>
            <el-option value label="全部"></el-option>
            <el-option
              v-for="item in Arr.projectTypeArr"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select> -->
        </el-form-item>

        <el-form-item label="样本类型">
          <el-autocomplete class="inline-input" v-model="params.sampleTypeName" :fetch-suggestions="querySearch"
            placeholder="请选择" @select="handleSelectSample" @focus="change(0)" style="width:228px"
            clearable></el-autocomplete>
          <!-- <el-select v-model="params.sampleType" placeholder="请选择" style="width:228px" clearable>
            <el-option value label="全部"></el-option>
            <el-option
              v-for="item in Arr.sampleTypeArr"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select> -->
        </el-form-item>

        <el-form-item label="核酸类型">
          <el-select v-model="params.nucleicAcidType" placeholder="请选择" style="width:228px" clearable>
            <el-option value label="全部"></el-option>
            <el-option v-for="item in nucleicAcidTypeArr" :key="item.id" :label="item.typeName"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="平台类型">
          <el-select v-model="params.platformType" placeholder="请选择" style="width:228px" clearable>
            <el-option value label="全部"></el-option>
            <el-option v-for="item in platformTypeArr" :key="item.id" :label="item.platformType"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="条码号">
          <el-input clearable v-model="params.barcodeCode" style="width:228px" placeholder="请输入条码号"></el-input>
          <!-- <el-autocomplete
            class="inline-input"
            v-model="params.barcodeCode"
            :fetch-suggestions="querySearch"
            placeholder="请输入条码号"
            @select="handleSelect"
            @focus="change(0)"
            style="width:228px"
            clearable
          ></el-autocomplete> -->
        </el-form-item>

        <el-form-item label="登记状态">
          <el-select v-model="params.registerState" placeholder="请选择" style="width:228px" clearable>
            <el-option value label="全部"></el-option>
            <el-option v-for="item in arr.registerStateArr" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="收样状态">
          <el-select v-model="params.receiveStatus" placeholder="请选择" style="width:228px" clearable>
            <el-option value label="全部"></el-option>
            <el-option v-for="item in arr.receiveStatusArr" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="关键字">
          <el-input clearable v-model="params.keyword" style="width:228px" placeholder="实验编号/送检单位/姓名"></el-input>
          <!-- <el-autocomplete
            class="inline-input"
            v-model="params.keyword"
            :fetch-suggestions="querySearch"
            placeholder="请输入关键字"
            @select="handleSelect"
            @focus="change(1)"
            style="width:221px"
            clearable
          ></el-autocomplete> -->
        </el-form-item>

        <el-form-item>
          <el-button size="mini" icon="el-icon-search" type="primary" @click="getList">查询</el-button>
        </el-form-item>
        <el-form-item style="margin-left: 10px;">
          <el-button size="mini" icon="el-icon-refresh" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-form :inline="true">
        <el-form-item>
          <el-button class="button-lan" type="primary" @click="getLRPdata" size="mini">获取LRP数据</el-button>
        </el-form-item>
        <el-form-item style="margin-left: 10px">
          <el-button size="mini" class="button-lan" type="primary" @click="add">新增</el-button>
        </el-form-item>
        <el-form-item style="margin-left: 10px">
          <el-button size="mini" class="button-lan" type="primary" @click="register">登记</el-button>
        </el-form-item>
        <el-form-item style="margin-left: 10px">
          <el-button size="mini" class="button-lan" type="primary" @click="cancelRegister">取消登记</el-button>
        </el-form-item>
        <el-form-item style="margin-right: 10px;float:right">
          <el-dropdown trigger="click" placement="bottom" @command="handleCommand">
            <el-button size="mini" type="primary">
              导出
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="20">导出当前</el-dropdown-item>
              <el-dropdown-item command="99999">导出全部</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
        <el-form-item style="margin-right: 20px;float:right">
          <el-button size="mini" class="button-lan" type="danger" @click="batchDel">批量删除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%;"
      @selection-change="handleSelectionChange" border :header-cell-style="{
        background: '#ebebeb'
      }" highlight-current-row :row-class-name="rowStyle" :height="heights" v-loading="loading">
      <el-table-column align="center" type="selection" width="50"></el-table-column>
      <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
      <el-table-column align="center" prop="barcodeCode" label="条码号" width="120"
        show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="projectTypeName" label="项目类型" width="380"></el-table-column>
      <el-table-column align="center" prop="experimentNumber" label="实验编号" width="250"></el-table-column>
      <el-table-column align="center" prop="sampleState" label="样本状态">
        <template slot-scope="{row}">{{ row.sampleState == 1 ? '已登记' : '已录入' }}</template>
      </el-table-column>
      <el-table-column align="center" prop="registerState" label="登记状态">
        <template slot-scope="{row}">{{ row.registerState == 1 ? '已登记' : '未登记' }}</template>
      </el-table-column>
      <el-table-column align="center" prop="entryDate" label="录入时间" width="160"></el-table-column>
      <el-table-column align="center" prop="submitName" label="送检姓名"></el-table-column>
      <el-table-column align="center" prop="inspectionUnit" label="送检单位" width="250"></el-table-column>
      <el-table-column align="center" prop="nucleicAcidName" label="核酸类型" width="100"></el-table-column>
      <el-table-column align="center" prop="sampleTypeName" label="样本类型" width="150" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="professionalGroupName" label="专业组" width="200"
        show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="platformTypeName" label="平台类型" width="100"></el-table-column>
      <el-table-column align="center" prop="receiveStatus" label="收样状态">
        <template slot-scope="{row}">{{ row.receiveStatus == 1 ? '合格' : (row.receiveStatus == 0 ? '不合格' : '') }}</template>
      </el-table-column>
      <el-table-column align="center" prop="otherSampleTypes" label="其他样本类型" width="150"></el-table-column>
      <el-table-column align="center" prop="registerPerson" label="登记人"></el-table-column>
      <el-table-column align="center" prop="registrationTime" label="登记时间" width="160"></el-table-column>
      <el-table-column align="center" prop="professionalGroupName" label="是否系统新增" width="200"></el-table-column>
      <el-table-column align="center" prop="isOutsourcers" label="是否流转外包" width="150">
        <template slot-scope="{row}">{{ row.isOutsourcers == 1 ? '是' : '否' }}</template>
      </el-table-column>
      <el-table-column align="center" prop="isVoid" label="是否作废">
        <template slot-scope="{row}">{{ row.isVoid == 1 ? '是' : '否' }}</template>
      </el-table-column>
      <el-table-column align="center" prop="reasonName" label="作废原因" show-overflow-tooltip
        width="100"></el-table-column>
      <el-table-column align="center" prop="remark" label="备注" show-overflow-tooltip width="100"></el-table-column>
      <el-table-column align="center" label="操作" width="130" fixed="right">
        <template slot-scope="scope">
          <div class="czDiv" style="font-size:14px">
            <el-button type="text" style="color:#0186ef;cursor:pointer;padding:0"
              @click="edit(scope.row.id)">编辑</el-button>
            <el-button type="text" v-show="scope.row.isVoid == 0" style="color:#0186ef;cursor:pointer;padding:0"
              @click="nullify(scope.row.id, scope.row.stateId, scope.row)">作废</el-button>
            <el-button type="text" v-show="scope.row.isVoid == 1" style="color:#0186ef;cursor:pointer;padding:0"
              @click="toEnabled(scope.row.id, scope.row.stateId)">启用</el-button>
            <el-button type="text" v-show="scope.row.registerState === 0" style="color:red;cursor:pointer;padding:0"
              @click="del(scope.row.id)">删除</el-button>
            <el-button type="text" v-show="scope.row.registerState === 1" style="color: #999999;padding:0" disabled>删除
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <div>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :page-sizes="[20, 50, 100, 200, 500]" layout="total, sizes, prev, pager, next, jumper" :total="listTotal"
          background></el-pagination>
      </div>
    </div>
    <!-- 登记弹窗 -->
    <el-dialog :visible.sync="dialogVisible" width="800px" title="登记" style="margin-top:15vh">
      <el-form :model="registrationData" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"
        :inline="true">
        <el-form-item label="核酸类型" prop="nucleicAcidType">
          <el-select v-model="registrationData.nucleicAcidType" placeholder="请选择" style="width:221px">
            <el-option v-for="item in nucleicAcidTypeArr" :key="item.id" :label="item.typeName"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="平台类型" prop="platformType">
          <el-select v-model="registrationData.platformType" placeholder="请选择" style="width:221px">
            <el-option v-for="item in platformTypeArr" :key="item.id" :label="item.platformType"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收样状态" prop="receiveStatus">
          <el-select v-model="registrationData.receiveStatus" placeholder="请选择" style="width:221px">
            <el-option v-for="item in arr.receiveStatusArr" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="是否外包" prop="isOutsourcers">
          <el-select v-model="registrationData.isOutsourcers" placeholder="请选择" style="width:221px">
            <el-option v-for="item in arr.isOutsourcersArr" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="开始环节" prop>
          <el-select v-model="startSection" placeholder="请选择" style="width:221px">
            <el-option value="" label="入库"></el-option>
          </el-select> -->
        <!-- <el-input clearable v-model="startSection" disabled style="width:221px"></el-input> -->
        <!-- </el-form-item> -->
        <el-form-item label="是否混合" prop
          v-show="registrationData.platformType == 1 && registrationData.nucleicAcidType == 3">
          <el-select v-model="registrationData.isMix" placeholder="请选择" style="width:221px">
            <el-option v-for="item in arr.isMixArr" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="外包商" prop v-show="registrationData.isOutsourcers">
          <el-select v-model="registrationData.outsourcersId" placeholder="请选择" style="width:221px">
            <el-option v-for="item in Arr.outsourcersArr" :key="item.id" :label="item.name" :value="item.id"
              @click.native="getOutsourcersInfo(item)"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="外包商负责人" prop v-show="registrationData.isOutsourcers && registrationData.outsourcersId">
          <el-input clearable v-model="outsourcersInfo.responseName" style="width:221px"></el-input>
        </el-form-item>
        <el-form-item label="外包收货地址" prop v-show="registrationData.isOutsourcers && registrationData.outsourcersId">
          <el-input clearable v-model="outsourcersInfo.address" style="width:221px"></el-input>
        </el-form-item>
        <el-form-item label="外包联系电话" prop v-show="registrationData.isOutsourcers && registrationData.outsourcersId">
          <el-input clearable v-model="outsourcersInfo.phone" style="width:221px"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop v-show="registrationData.isOutsourcers && registrationData.outsourcersId">
          <el-input clearable v-model="registrationData.remark" style="width:221px"></el-input>
        </el-form-item>
        <el-form-item label="实验类型" prop="dictEnumerateId">
          <el-select v-model="registrationData.dictEnumerateId" placeholder="请选择" style="width:221px">
            <el-option v-for="item in dictEnumerateList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="resetRegister('ruleForm')">取 消</el-button>
        <el-button size="mini" type="primary" @click="submitRegister('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 新增弹窗 -->
    <el-dialog :visible.sync="dialogVisible2" width="800px" title="登记:新增" style="margin-top:15vh">
      <el-form :model="addData" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm"
        :inline="true">
        <el-form-item label="条码号" prop="barcodeCode">
          <el-input clearable v-model="addData.barcodeCode" placeholder="请输入条码号" style="width:230px"></el-input>
          <!-- <el-autocomplete
            class="inline-input"
            v-model="addData.barcodeCode"
            :fetch-suggestions="querySearch"
            placeholder="请输入条码号"
            @select="handleSelect"
            @focus="change(0)"
            style="width:230px"
          ></el-autocomplete> -->
        </el-form-item>
        <el-form-item label="送检姓名" prop="submitName">
          <el-input clearable v-model="addData.submitName" placeholder="请输入送检姓名" style="width:230px"></el-input>
          <!-- <el-autocomplete
            class="inline-input"
            v-model="addData.submitName"
            :fetch-suggestions="querySearch"
            placeholder
            @select="handleSelect"
            @focus="change(0)"
            disabled
            style="width:230px"
          ></el-autocomplete> -->
        </el-form-item>

        <el-form-item label="项目类型" prop="projectTypeName">
          <el-autocomplete class="inline-input" v-model="addData.projectTypeName" :fetch-suggestions="querySearch"
            placeholder="请选择" @select="handleSelectProject" @focus="change(1)" style="width:230px"
            clearable></el-autocomplete>
          <!-- <el-select v-model="addData.projectType" placeholder="请选择" style="width:230px">
            <el-option
              v-for="item in Arr.projectTypeArr"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item label="平台类型" prop="platformType">
          <el-select v-model="addData.platformType" placeholder="请选择" style="width:230px">
            <el-option v-for="item in platformTypeArr" :key="item.id" :label="item.platformType"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="送检单位" prop="inspectionUnit">
          <el-input clearable v-model="addData.inspectionUnit" placeholder="请输入送检单位" style="width:230px"></el-input>

          <!-- <el-autocomplete
            class="inline-input"
            v-model="addData.inspectionUnit"
            :fetch-suggestions="querySearch"
            placeholder="请输入送检单位"
            @select="handleSelect"
            @focus="change(0)"
            style="width:230px"
          ></el-autocomplete> -->
        </el-form-item>
        <el-form-item label="收样状态" prop="receiveStatus">
          <el-select v-model="addData.receiveStatus" placeholder="请选择" style="width:230px">
            <el-option v-for="item in arr.receiveStatusArr" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="样本类型" prop="sampleType">
          <el-autocomplete class="inline-input" v-model="addData.sampleType" :fetch-suggestions="querySearch"
            placeholder="请选择" @select="handleSelectSample" @focus="change(0)" style="width:230px"
            clearable></el-autocomplete>
          <!-- <el-select v-model="addData.sampleType" placeholder="请选择" style="width:230px">
            <el-option
              v-for="item in Arr.sampleTypeArr"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select> -->
        </el-form-item>

        <el-form-item label="核酸类型" prop="nucleicAcidType">
          <el-select v-model="addData.nucleicAcidType" placeholder="请选择" style="width:230px">
            <el-option v-for="item in nucleicAcidTypeArr" :key="item.id" :label="item.typeName" :value="item.id"
              style="width:230px"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合作单位" prop>
          <el-input clearable v-model="addData.cooperation" placeholder="请输入合作单位" style="width:230px"></el-input>

          <!-- <el-autocomplete
            class="inline-input"
            v-model="addData.cooperation"
            :fetch-suggestions="querySearch"
            placeholder="请输入合作单位"
            @select="handleSelect"
            @focus="change(0)"
            style="width:230px"
          ></el-autocomplete> -->
        </el-form-item>
        <el-form-item label="是否混合" v-show="addData.nucleicAcidType == 3 && addData.platformType == 1">
          <el-select v-model="addData.isMix" placeholder="请选择" style="width:230px">
            <el-option v-for="item in arr.isMixArr" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" clearable v-model="addData.remark" style="width:571px"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="resetRegister('ruleForm2')">取 消</el-button>
        <el-button size="mini" type="primary" @click="submitRegister2('ruleForm2')">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑弹窗 -->
    <el-dialog :visible.sync="dialogVisible3" width="800px" title="登记:编辑">
      <el-form :model="editData" :rules="rules3" ref="ruleForm3" label-width="100px" class="demo-ruleForm"
        :inline="true" size="mini">
        <el-form-item label="条码号" prop="barcodeCode">
          <el-input clearable style="width:210px" v-model="editData.barcodeCode" disabled></el-input>
        </el-form-item>
        <el-form-item label="项目类型">
          <el-input clearable style="width:210px" v-model="editData.projectTypeName" disabled></el-input>
        </el-form-item>
        <el-form-item label="实验编号">
          <el-input clearable style="width:210px" v-model="editData.experimentNumber" disabled></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-input clearable style="width:210px" v-model="registerStateObj[editData.registerState]"
            disabled></el-input>
        </el-form-item>
        <el-form-item label="录入时间">
          <el-input clearable style="width:210px" v-model="editData.entryDate" disabled></el-input>
        </el-form-item>
        <el-form-item label="登记时间">
          <el-input clearable style="width:210px" v-model="editData.registrationTime" disabled></el-input>
        </el-form-item>
        <el-form-item label="送检姓名">
          <el-input clearable style="width:210px" v-model="editData.submitName" disabled></el-input>
        </el-form-item>
        <el-form-item label="送检单位">
          <el-input clearable style="width:210px" v-model="editData.inspectionUnit" disabled></el-input>
        </el-form-item>
        <el-form-item label="核酸类型">
          <el-input clearable style="width:210px" v-model="editData.nucleicAcidName" disabled></el-input>
        </el-form-item>
        <el-form-item label="样本类型" prop="sampleType">
          <el-input clearable style="width:210px" v-model="editData.sampleTypeName" disabled></el-input>
        </el-form-item>
        <el-form-item label="平台类型" prop="platformType">
          <el-select v-model="editData.platformType" placeholder="请选择" style="width:210px">
            <el-option v-for="item in platformTypeArr" :key="item.id" :label="item.platformType"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收样状态" prop="receiveStatus">
          <el-select v-model="editData.receiveStatus" placeholder="请选择" style="width:210px">
            <el-option v-for="item in arr.receiveStatusArr" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="其他样本类型">
          <el-input clearable style="width:210px" v-model="editData.otherSampleTypes"></el-input>
        </el-form-item>
        <el-form-item label="作废原因" prop="remark">
          <el-input type="textarea" clearable v-model="editData.reasonName" disabled style="width:532px"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" clearable v-model="editData.remark" style="width:532px"
            placeholder="请输入备注"></el-input>
          <!-- <el-autocomplete
            class="inline-input"
            v-model="editData.remark"
            :fetch-suggestions="querySearch"
            placeholder="请输入备注"
            @select="handleSelect"
            @focus="change(5)"
            style="width:532px"
          ></el-autocomplete> -->
        </el-form-item>
        <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :default-openeds="['1']">
          <el-submenu index="1">
            <template slot="title">
              <span>临床信息</span>
            </template>
            <el-form-item label="白细胞(10⁹/L)">
              <el-input clearable style="width:210px" v-model="editData.whiteBloodCells"></el-input>
            </el-form-item>
            <el-form-item label="中性粒(%)">
              <el-input clearable style="width:210px" v-model="editData.neutralGrain"></el-input>
            </el-form-item>
            <el-form-item label="淋巴细胞(%)">
              <el-input clearable style="width:210px" v-model="editData.lymphocyte"></el-input>
            </el-form-item>
            <el-form-item label="CRP(mg/L)">
              <el-input clearable style="width:210px" v-model="editData.crp"></el-input>
            </el-form-item>
            <el-form-item label="PCT(mg/L)">
              <el-input clearable style="width:210px" v-model="editData.pct"></el-input>
            </el-form-item>
            <el-form-item label="前端备注">
              <el-input clearable style="width:210px" v-model="editData.frontendNote"></el-input>
            </el-form-item>
            <el-form-item label="提取浓度">
              <el-input clearable style="width:210px" v-model="editData.extractionConcentration"></el-input>
            </el-form-item>
            <el-form-item label="宿主率">
              <el-input clearable style="width:210px" v-model="editData.rateOfHost"></el-input>
            </el-form-item>
            <el-form-item label="主诉">
              <el-input clearable style="width:210px" v-model="editData.principalComplaint"></el-input>
            </el-form-item>
            <el-form-item label="临床诊断">
              <el-input clearable style="width:210px" v-model="editData.clinicalDiagnosis"></el-input>
            </el-form-item>
            <el-form-item label="用药">
              <el-input clearable style="width:210px" v-model="editData.medication"></el-input>
            </el-form-item>
            <el-form-item label="重点关注病原">
              <el-input clearable style="width:210px" v-model="editData.focusOnPathogen"></el-input>
            </el-form-item>
            <el-form-item label="培养鉴定结果">
              <el-input clearable style="width:210px" v-model="editData.cultureIdentificationResults"></el-input>
            </el-form-item>
            <el-form-item label="发病时长">
              <el-input clearable style="width:210px" v-model="editData.onsetTime"></el-input>
            </el-form-item>
            <el-form-item label="DNA结果">
              <el-input clearable v-model="editData.resultDna" style="width:210px"></el-input>
            </el-form-item>


            <el-form-item label="DNA检出病原">
              <el-input clearable v-model="editData.resultDnaOn" style="width:210px"></el-input>
            </el-form-item>


            <el-form-item label="RNA结果">
              <el-input clearable v-model="editData.resultRna" style="width:210px"></el-input>
            </el-form-item>


            <el-form-item label="RNA检出病原">
              <el-input clearable v-model="editData.resultRnaOn" style="width:210px"></el-input>
            </el-form-item>
          </el-submenu>
        </el-menu>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible3 = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="submitRegister3('ruleForm3')">确 定</el-button>
      </span>
    </el-dialog>
    <!-- lrp弹窗 -->
    <el-dialog :visible.sync="dialogVisible4" width="1400px" title="获取LRP数据">
      <el-form :inline="true" @submit.native.prevent="getLRPbyCode">
        <el-form-item label="条码号">
          <el-input clearable v-model="barcodeCode" placeholder="请输入条码号" style="margin-bottom:10px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" @click="getLRPbyCode">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="container">
        <div class="aside2">
          <el-table ref="multipleTable2" :data="LRP_tableData" tooltip-effect="dark" style="width: 100%"
            @selection-change="handleSelectionChange" border :cell-style="cellStyle" :header-cell-style="{
              background: '#ebebeb'
            }" highlight-current-row v-loading="loading" height='600'>
            <el-table-column align="center" type="selection" width="50" :selectable="setDisabled"></el-table-column>
            <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
            <el-table-column align="center" label="条码号" prop="barcodeCode" width="150"></el-table-column>
            <el-table-column align="center" prop="projectTypeName" label="项目类型" width="200"
              show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="submitName" label="送检姓名"></el-table-column>
            <el-table-column align="center" prop="inspectionUnit" label="送检单位" width="200"
              show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="sampleTypeName" label="样本类型" width="100" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="状态" width="70" prop="state">
              <template slot-scope="{row}">{{ row.state === 1 ? '已录入' : '未录入' }}</template>
            </el-table-column>
          </el-table>
        </div>
        <div class="middle">
          <el-button size="mini" type="primary" icon="el-icon-right" circle @click="transfer"></el-button>
        </div>
        <div class="aside2">
          <el-table ref="multipleTable" :data="local_tableData" tooltip-effect="dark"
            @selection-change="handleSelectionChange" border :cell-style="cellStyle" :header-cell-style="{
              background: '#ebebeb'
            }" highlight-current-row height='600'>
            <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
            <el-table-column align="center" label="条码号" prop="barcodeCode" width="150"></el-table-column>
            <el-table-column align="center" prop="projectTypeName" label="项目类型" width="200"
              show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="submitName" label="送检姓名"></el-table-column>
            <el-table-column align="center" prop="inspectionUnit" label="送检单位" width="200"
              show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="sampleTypeName" label="样本类型" width="100" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="操作" width="50">
              <template slot-scope="scope">
                <div class="czDiv">
                  <span style="color:red;cursor:pointer" @click="transferDel(scope.row)">删除</span>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible4 = false; LRP_tableData = []; local_tableData = []">取 消</el-button>
        <el-button size="mini" type="primary" @click="submitLRP">提交</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="nullifyDialog" style="margin-top:15vh;" title="提示" width="500px">
      <el-form :model="dictReasonId" :rules="rules4" class="demo-ruleForm" ref="ruleForm" :inline="true">
        <el-form-item label="请输入作废原因" prop="dictReasonId">
          <el-select v-model="dictReasonId" placeholder="请选择" style="width:320px">
            <el-option v-for="item in Arr.reasonNameArr" :key="item.id" :label="item.reasonName"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="nullifyDialog = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="sureToNullify">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  exportForm,
  registerList,
  deleteRegisterList,
  aRegisterList,
  addRegisterList,
  editRegisterList,
  registration,
  getLRPbyCode,
  submitLRP,
  cancelRegister,
  toVoid,
  registerEnabled
} from "@/api/technologyManage/index.js";
import {
  enumerate,
} from '@/api/dictionary/systemSetting/enumeration'
import { voidPlaceOn, delPlaceOn, manageOperation } from '@/api/commonArr/index.js'
import { projectTypeArr, nucleicAcidTypeArr, sampleTypeArr, platformTypeArr, reasonNameArr, outsourcersArr, professionalArr, barcodeCodeList } from "@/api/commonArr/index.js"
import { Arr } from "@/utils/data.js";
export default {
  data() {
    return {
      projectTypeList: [],
      value1: [],
      value2: [],
      restaurants: [],
      editData: {},
      addData: {
        projects: [
          {
            projectType: "",
            sampleType: ""
          }
        ],
        isMix: 1
      },
      LRP_tableData: [],
      barcodeCode: "",
      registerStateObj: {
        0: "未登记",
        1: "已登记"
      },
      loading: false,
      arr: {},
      tableData: [],
      local_tableData: [],
      multipleSelection: [],
      dialogVisible: false,
      dialogVisible2: false,
      dialogVisible3: false,
      dialogVisible4: false,
      ruleForm: {},
      ruleForm2: {},
      stateId: '',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      rules: {
        platformType: [
          { required: true, message: "请选择平台类型", trigger: "change" }
        ],
        nucleicAcidType: [
          { required: true, message: "请选择核酸类型", trigger: "blur" }
        ],
        receiveStatus: [
          { required: true, message: "请选择收样类型", trigger: "change" }
        ],
        isOutsourcers: [
          { required: true, message: "请选择是否外包", trigger: "change" }
        ],
        dictEnumerateId: [
          { required: true, message: "请选择实验类型", trigger: "change" }
        ],
      },
      rules4: {
        dictReasonId: [
          { required: true, message: "请选择作废原因", trigger: "blur" }
        ]
      },
      rules2: {
        barcodeCode: [
          { required: true, message: "请输入条码号", trigger: "change" }
        ],
        nucleicAcidType: [
          { required: true, message: "请选择核酸类型", trigger: "change" }
        ],
        projectTypeName: [
          { required: true, message: "请选择项目类型", trigger: "change" }
        ],
        submitName: [
          { required: true, message: "请输入送检姓名", trigger: "blur" }
        ],
        inspectionUnit: [
          { required: true, message: "请输入送检单位", trigger: "change" }
        ],
        platformType: [
          { required: true, message: "请选择平台类型", trigger: "change" }
        ],
        sampleType: [
          { required: true, message: "请选择样本类型", trigger: "change" }
        ],
        receiveStatus: [
          { required: true, message: "请选择收样状态", trigger: "change" }
        ],
        cooperation: [
          { required: true, message: "请输入合作单位", trigger: "change" }
        ]
      },
      rules3: {
        platformType: [
          { required: true, message: "请选择平台类型", trigger: "change" }
        ],
        receiveStatus: [
          { required: true, message: "请选择收样状态", trigger: "change" }
        ]
      },
      listTotal: 0,
      params: {
        pageNum: 1,
        pageSize: 20,
        projectType: "",
        sampleType: "",
        nucleicAcidType: "",
        platformType: "",
        registerState: "",
        receiveStatus: ""
      },
      nullifyDialog: false,
      registrationData: {
        ids: [],
        isMix: 0,
        isOutsourcers: 0,
        nucleicAcidType: 1
      },
      dictReasonId: "",
      id: "", //编辑或作废时单条数据id
      Arr: {},
      a: "",
      outsourcersInfo: {},
      startSection: "入库",
      ids: [],
      heights: undefined,
      row: {},
      dictEnumerateList: [],
      sampleTypeList: [],
      nucleicAcidTypeArr: [],
      projectTypeArr: [],
      platformTypeArr: []
    };
  },
  methods: {

    enumerate() {
      enumerate({ pageNum: 1, pageSize: 999 }).then(res => {
        this.dictEnumerateList = []
        res.rows.map(el => {
          if (el.type === 'experimentType') {
            this.dictEnumerateList.push(el)
            // console.log(this.dictEnumerateList);
          }
        })
      })
    },
    // 下拉框
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    // 多个下拉框的数据
    loadAll() {
      const array = [
        this.sampleTypeList,
        this.projectTypeList,
      ];
      return array;
    },
    // 聚焦下拉框时
    change(i) {
      // this.$set(this.restaurants,'',this.loadAll()[i])
      this.restaurants = this.loadAll()[i];
      // console.log(this.restaurants);
    },
    handleCommand(command) {
      this.params.pageSize = command;
      this.handleExport();
    },
    // 表格复选框
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.ids = val.map(item => item.id);
      console.log(this.ids);
    },
    register() {
      if (this.multipleSelection.length == 0) {
        this.$message.error("请勾选内容");
        return;
      }
      // if (this.multipleSelection.some(item => {
      //   return item.isCompare === 0
      // })) {
      //   this.$message.error('请先进行登记对照')
      //   return
      // }

      this.registrationData = {
        ids: [],
        isMix: 0,
        isOutsourcers: 0,
        receiveStatus: 1,
        dictEnumerateId: 34,
        platformType: 1,
        // nucleicAcidType:3
      };
      // this.$set(this.registrationData,'nucleicAcidType',1)
      this.dialogVisible = true;
      this.enumerate()
      this.multipleSelection.forEach(el => {
        this.registrationData.ids.push(el.id);
      });
    },
    cancelRegister() {
      if (this.multipleSelection.length == 0) {
        this.$message.error("请勾选内容");
        return;
      }
      this.$confirm("是否取消登记?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let idList = []
        this.multipleSelection.map(el => {
          idList.push(el.id)
        })
        cancelRegister(idList).then(() => {
          this.$message({
            type: "success",
            message: "取消登记成功!"
          });
          this.getList();
        });

      });
    },
    batchDel() {
      if (this.multipleSelection.length == 0) {
        this.$message.error("请勾选内容");
        return;
      }
      this.$confirm("是否批量删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let idList = []
        this.multipleSelection.map(el => {
          idList.push(el.id)
        })
        deleteRegisterList(idList).then(() => {
          this.$message.success('批量删除成功')
          this.getList()
        })
      })
    },
    add() {
      this.dialogVisible2 = true;
      this.addData = {
        projects: [
          {
            projectType: "",
            sampleType: ""
          }
        ],
        isMix: 1,
        platformType: 1,
        receiveStatus: 1
      }
    },
    edit(id) {
      this.dialogVisible3 = true;
      aRegisterList(id).then(res => {
        this.editData = { ...res.data };
        // console.log(this.editData);
      });
    },
    getLRPdata() {
      this.dialogVisible4 = true;
    },

    submitRegister3(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          editRegisterList(this.editData).then(() => {
            this.$message.success("编辑成功");
            this.getList();
            this.dialogVisible3 = false;
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    submitRegister2(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.addData.projects = [
            {
              projectType: this.params.projectType,
              sampleType: this.params.sampleType
            }
          ];
          addRegisterList(this.addData).then(res => {
            this.params.projectType = ''
            this.params.sampleType = ''
            this.getList();
            this.$message.success("新增成功");
            this.dialogVisible2 = false;
            this.$refs[formName].resetFields();
            this.addData = {
              submitName: "",
              isMix: 0,
              ids: []
            };
          });

        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    submitRegister(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          registration(this.registrationData).then(() => {
            this.dialogVisible = false;
            this.$message.success("登记成功");
            this.getList();
          });
          this.dialogVisible = false;
          this.registrationData = {}
          this.registrationData = {
            ids: [],
            isMix: 0
          };
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetRegister(formName) {
      this.$refs[formName].resetFields(); //清空
      this.addData = {
        submitName: "",
        isMix: 0,
        ids: []
      };
      this.dialogVisible = false;
      this.dialogVisible2 = false;
      this.registrationData = {}
      this.registrationData.ids = [];
      this.registrationData.isMix = 0
    },
    nullify(id, stateId, row) {
      this.id = id;
      this.stateId = stateId
      this.row = row
      this.nullifyDialog = true;

    },
    voidPlaceOn() {
      voidPlaceOn({ stateId: this.stateId, status: 0 }).then(() => {
      })
    },
    sureToNullify() {
      toVoid({
        dictReasonId: this.dictReasonId,
        id: this.id
      }).then(() => {
        this.$message.success("已作废");
        this.nullifyDialog = false;
        this.getList();
        this.voidPlaceOn()
        this.row.status = 0
        this.row.operationStatus = 0
        manageOperation(this.row)
      });
    },
    del(ids) {
      this.$confirm("是否删除选中数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteRegisterList(ids).then(res => {
          this.getList();
          this.$message({
            type: "success",
            message: "已删除!"
          });
        });
      });
    },
    handleExport() {
      const queryParams = this.params;
      this.$confirm("是否确认导出数据?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function () {
          return exportForm(queryParams);
        })
        .then(response => {
          this.download(response.msg);
        });
    },
    transfer() {
      this.multipleSelection.forEach(el => {
        this.local_tableData.push(el);
      });
      this.clearSelection();
    },
    clearSelection() {
      this.$refs.multipleTable2.clearSelection();
    },
    setDisabled(row) {
      let some = this.local_tableData.some(item => {
        return item.key === row.key;
      });

      if (some) {
        return false;
      }
      if (row.state === 1) {
        return false;
      } else {
        return true;
      }
    },
    transferDel(row) {
      this.local_tableData.forEach((item, i) => {
        if (item === row) {
          this.local_tableData.splice(i, 1);
        }
      });
    },
    getList() {
      this.loading = true
      registerList(this.params).then(res => {
        this.tableData = res.rows;
        this.listTotal = res.total;
        this.loading = false
      });
    },
    getLRPbyCode() {
      getLRPbyCode({ barcodeCode: this.barcodeCode }).then(res => {
        // let newLRP=[]
        res.data.forEach(el => {
          this.LRP_tableData.push(el);
        });
        let strings = this.LRP_tableData.map(el => JSON.stringify(el))
        console.log(strings);
        let newLRP = Array.from(new Set(strings))
        let result = newLRP.map(el => JSON.parse(el))
        console.log(result);
        this.LRP_tableData = result
      });
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.params.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.params.pageNum = val;
      this.getList();
    },
    submitLRP() {
      const keyList = [];
      this.local_tableData.forEach(el => {
        keyList.push(el.key);
      });
      submitLRP({ key: keyList }).then(() => {
        this.dialogVisible4 = false;
        this.$message.success("提交成功");
        this.getList();
      });

      this.LRP_tableData = [];
      this.local_tableData = [];

    },
    timeChange1() {
      if (!this.value1) {
        this.value1 = []
      }
      this.params.entryStartDate = this.value1[0];
      this.params.entryEndDate = this.value1[1];
    },
    timeChange2() {
      if (!this.value2) {
        this.value2 = []
      }
      console.log(this.value2, 8888);
      // this.$set(this.value2,1,this.value2[1].replace('00:00:00','23:59:59'))
      this.params.registrationStartTime = this.value2[0];
      this.params.registrationEndTime = this.value2[1]
    },
    reset() {
      this.params = {
        pageNum: 1,
        pageSize: 20,
        projectType: "",
        sampleType: "",
        nucleicAcidType: "",
        platformType: "",
        registerState: "",
        receiveStatus: ""
      };
      // this.value1 = []
      this.timeChange1()
      this.value2 = []
      this.getList();
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    getOutsourcersInfo(item) {
      this.$set(this.outsourcersInfo, "responseName", item.responseName);
      this.outsourcersInfo.phone = item.phone;
      this.outsourcersInfo.address = item.address;
      this.registrationData.remark = item.remark;
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (row.state === 1) {
        return "background:yellow";
      } else {
        return "";
      }
    },
    toEnabled(id, stateId) {
      this.$confirm("是否确认启用?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        registerEnabled({ id }).then(() => {
          this.$message.success("启用成功");
          this.getList();
          delPlaceOn(stateId)
        });
      });
    },
    rowStyle({ row }) {
      var arr = this.ids;
      for (let i = 0; i < arr.length; i++) {
        if (row.id === arr[i]) {
          return "rowStyle";
        }
      }
    },
    getDefaultDate() {
      var now = new Date();
      var date = now.getDate();
      // now.setDate(date - 1); //获取前一天
      var y = now.getFullYear();
      var m = (now.getMonth() + 1).toString().padStart(2, "0");
      var d = now
        .getDate()
        .toString()
        .padStart(2, "0");
      var defaultDate = y + "-" + m + "-" + d + " " + "00:00:00";
      var defaultDate2 = y + "-" + m + "-" + d + " " + "23:59:59";
      // var now2=new Date()
      // var y2 = now2.getFullYear();
      // var m2 = (now2.getMonth() + 1).toString().padStart(2, "0");
      // var d2 = now2.getDate().toString().padStart(2, "0");
      // var defaultDate2 = y2 + "-" + m2 + "-" + d2+' '+'00:00:00';
      this.$set(this.value1, 0, defaultDate),
        this.$set(this.value1, 1, defaultDate2);
      // this.$set(this.value2, 0, defaultDate),
      //   this.$set(this.value2, 1, defaultDate2);
      this.timeChange1()
      // this.timeChange2()
    },
    watchTableHights() {
      this.$nextTick(() => {
        // 根据浏览器高度设置初始高度
        this.heights =
          window.innerHeight - this.$refs.refsTable.offsetHeight - 150;
        // 监听浏览器高度变化，修改表格高度
        window.onresize = () => {
          this.heights =
            window.innerHeight - this.$refs.refsTable.offsetHeight - 150;
        };
      });
    },
    handleSelectSample(item) {
      this.params.sampleType = item.id
    },
    handleSelectProject(item) {
      this.params.projectType = item.id
    },
  },
  mounted() {
    // console.log(Arr.sampleTypeArr);

    this.getList();
    // this.arr = arr;
    this.Arr = Arr;
    this.watchTableHights();

  },
  created() {
    this.arr = JSON.parse(window.sessionStorage.getItem('arr'))
    nucleicAcidTypeArr().then(res => {
      this.nucleicAcidTypeArr = res.rows
    })
    projectTypeArr().then(res => {
      res.rows.map((el) => {
        this.projectTypeList.push({
          value: el.name,
          id: el.id
        })
      })
    })
    platformTypeArr().then(res => {
      this.platformTypeArr = res.rows
      // console.log(this.platformTypeArr);
    })
    sampleTypeArr().then(res => {
      res.rows.map(el => {
        this.sampleTypeList.push({
          value: el.name,
          id: el.id
        })
      })
    })

    this.getDefaultDate();
  },
  updated() {
    this.$refs["multipleTable"].doLayout();
  }
};
</script>

<style lang="scss" scoped>
.packages {
  padding-left: 10px;

  // height: 86vh;
  .vp-tite {
    color: #333;
    height: 35px;
    border-bottom: 1px solid #eff1f3;
  }

  .czDiv {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-evenly;
  }

  .container {
    // border: 1px solid red;
    border-radius: 4px;
    display: flex;
    padding-right: 19px;

    .aside2 {
      width: 50%;
      // border-right: 1px solid rgb(220, 223, 230);
      // padding: 15px;
      box-sizing: border-box;
    }

    .main2 {
      width: 50%;
      // padding: 15px;

      // border-left: 10px solid blue;
      box-sizing: border-box;
    }

    .middle {
      // line-height: 200%;
      display: flex;
      align-items: center;
    }
  }

  .block {
    // width: 100%;
    // height: 2vh;
    // background-color: #fff;
    // position: absolute;
    // display: flex;
    // flex-direction: row-reverse;
    // bottom: 20px;
    // right: 20px;
    // z-index: 99;
    width: 100%;
    // height: 70px;
    position: absolute;
    display: flex;
    flex-direction: row-reverse;
    bottom: 10px;
    right: 20px;
    z-index: 99;
  }

  .el-col-5 {
    width: 20%;
  }

  ::v-deep .el-table__body tr.current-row>td {
    background: #a8d6fe !important;
  }

  ::v-deep .el-table__body tr:hover>td {
    background: #a8d6fe !important;
  }

  ::v-deep .rowStyle {
    background-color: #a8d6fe !important;
  }

  .el-row {
    display: flex;
    flex-wrap: wrap;
  }

  .el-table__body-wrapper {
    z-index: 2;
  }


  .topDiv {
    ::v-deep .el-form-item__label {
      font-size: 12px;
      padding: 0 5px 0 0;
      margin: 0;
    }
  }

  .formItem {
    .el-form-item {
      margin-bottom: 10px;
    }
  }

}
</style>
